<template>
  <div>
    <div style="margin:15px;">
      <div class="pay-logo">
        <div class="logo">
          <img :src="payData.logo">
          <div class="gray font-size18">向商家"{{payData.name}}"付款</div>
        </div>
        <div class="pay-money">
          <div>消费金额</div>
          <div class="inputAmt">
            <span class="inputLeft">￥</span>
            <input class="font-size24 changeInput" type="number" v-model="pay.totalAmount" @change="changeInput(pay.totalAmount)" placeholder="0.00" />
          </div>
        </div>
      </div>
      <div class="pay-amounts">
        <div class="tar  red">蜂蜜最高抵扣：￥{{deduction?'-':''}}{{formatMoney(deduction || 0,2)}}</div>
        <div class="dsf mt20">
          <div class="flex1">实付金额</div>
          <div class="flex1 tar">￥{{formatMoney(pay.actualAmount || 0,2)}}</div>
        </div>
      </div>
      <div>
        <yd-button size="large" type="danger" @click.native="submitPay" :loading="loading" loading-txt="提交中">确认</yd-button>
      </div>
      <yd-popup v-model="showPay" position="bottom">
        <div class="popup-height">
          <div class="flex1 font-size18">请选择支付方式</div>
          <div class="flex1">
            <div class="close" @click="close"></div>
          </div>
        </div>
        <div class="popup-height" v-for="(item) in payList" :key="item.code">
          <img :src="item.img" class="payLogo" />
          <div class="flex1">
            <span class="paySize">{{item.name}}</span>
          </div>
          <div class="tar">
            <yd-radio-group v-model="radio1">
              <yd-radio :val="item.code">&nbsp</yd-radio>
            </yd-radio-group>
            <!-- <i class="iconfont" :class="payCode === item.code?'icon-checkboxround1 pay-checked':'icon-checkboxround0 pay-check'" @tap="payChecked(item.code)"></i> -->
          </div>
        </div>
        <div class="lihe100">
          支付￥{{formatMoney(pay.actualAmount || 0,2)}}
        </div>
      </yd-popup>
      <keyboard :show_key="show_key" v-if="show_key" @hideFun="hideFun"></keyboard>
    </div>

  </div>
</template>
<script>
import keyboard from './keyboard.vue'
import request from '../utils'
export default {
  components: { keyboard },
  data () {
    return {
      radio1: '',
      payData: {
        logo: '',
        name: '',
        giftAmtRate: '',
      },
      pay: {
        shopId: '',
        totalAmount: '',//消费金额
        actualAmount: '',//实付金额
        userId: this.$route.query.userId,
        code: this.$route.query.code
      },
      goldData: {
        orderId: '',
        payPassword: '',
        orderSn: '',
      },
      payList: [
        { name: '蜜宝支付', code: 'toPay', img: 'money' },
        { name: '蜜金支付', code: 'dPay', img: 'vouchers' },
        { name: '微信支付', code: 'wxPay', img: 'weixin' },
        { name: '支付宝支付', code: 'aliPay', img: 'alipay' },
      ],
      deduction: '',
      showPay: false,
      show_key: false,
      loading: false,
    }
  },
  methods: {
    // 获取详情
    async getShop () {
      this.$dialog.loading.open('加载中...');
      let id = this.$route.query.shopId || 340
      let url = `/offline/shop/get/${id}`
      let result = await request.getData(url)
      if (result.code == 200) {
        this.payData.logo = result.data.logo
        this.pay.shopId = result.data.id
        this.payData.name = result.data.name
        this.payData.giftAmtRate = result.data.giftAmtRate
        this.$dialog.loading.close();
      } else {
        this.$dialog.loading.close();
      }
    },
    //动态计算金额
    changeInput (e) {
      this.deduction = Number(e * this.payData.giftAmtRate / 100).toFixed(2)
      this.pay.actualAmount = e - this.deduction
      this.pay.totalAmount = this.pay.totalAmount ? Number(this.pay.totalAmount).toFixed(2) : ''
    },
    async submitPay () {
      if (!this.pay.totalAmount) {
        this.$dialog.toast({ mes: '消费金额不能为空', icon: 'error', timeout: 2500 });
        return;
      }
      if (this.pay.totalAmount <= 0) {
        this.$dialog.toast({ mes: '消费金额不能为0或者负数', icon: 'error', timeout: 2500 })
        return;
      }
      this.pay.totalAmount = +this.pay.totalAmount
      this.loading = true
      let url = '/offline/confirm'
      let result = await request.post(url, this.pay)
      if (result.code == 200) {
        this.loading = false
        this.weixinPay(result.data)
      } else {
        this.loading = false
        this.$dialog.toast({ mes: result.msg, icon: 'error', timeout: 2500 });
      }
    },
    // 微信支付
    weixinPay (data) {
      var vm = this
      if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
          document.attachEvent('onWeixinJSBridgeReady', vm.onBridgeReady(data));
        }
      } else {
        vm.onBridgeReady(data);
      }
    },
    onBridgeReady (data) {
      let vm = this
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
        debug: true,
        appId: data.appId,
        timeStamp: data.timeStamp,
        nonceStr: data.nonceStr,
        package: data.package,
        signType: data.signType,
        paySign: data.sign,
      },
        function (res) {
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            vm.$dialog.toast({ mes: '支付成功', icon: 'success', timeout: 2500 });
          } else {
            vm.$dialog.toast({ mes: '支付失败', icon: 'error', timeout: 2500 });
          }
        }
      );
    },
    //关闭popup
    close () {
      this.showPay = false
    },
    hideFun () {
      this.show_key = false
    },
    formatMoney (num, n) {
      num = Number(num).toFixed(n);
      let re = /(-?\d+)(\d{3})/;
      while (re.test(num)) {
        num = num.replace(re, "$1,$2");
      }
      return num;
    }
  },
  mounted () {
    this.getShop()
    this.payList.forEach(url => {
      url.img = require('@/assets/images/' + url.img + '.png');
    })
  }
}
</script>
<style scoped>
.changeInput {
  border: none;
  height: 40px;
  line-height: 40px;
  width: 100%;
  outline: none;
}
.pay-logo,
.pay-amounts {
  background: #fff;
  border-radius: 6px;
  padding: 10px 15px;
  border: 1px solid #e5e5e5;
  margin-bottom: 15px;
  font-size: 16px;
}
.pay-money {
  margin-top: 20px;
}
.logo {
  text-align: center;
}
.dsf {
  display: flex;
}
.flex1 {
  flex: 1;
}
.gray {
  color: #999 !important;
}
.inputAmt {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  height: 60px;
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  padding-left: 10px;
}

.popup-height {
  background: #fff;
  display: flex;
  height: 55px;
  padding: 0px 15px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f2f5f8;
}
.popup-height:last-child {
  border-bottom: none;
}
.lihe100 {
  line-height: 50px;
  text-align: center;
  background: #ef4f4f;
  font-size: 18px;
  color: #fff;
}
.close {
  color: #ccc;
  border-radius: 12px;
  line-height: 20px;
  font-size: 18px;
  padding: 1px;
  text-align: right;
}
.close:after {
  content: "\2716";
}
.payLogo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.paySize {
  margin-left: 15px;
  display: inline-block;
  font-size: 16px;
}
.pay-checked {
  color: #1ca71a;
  width: 24px;
  height: 24px;
  font-size: 22px !important;
  display: inline-block;
  position: relative;
  top: 2px;
}
.pay-check {
  color: #d9d9d9;
  width: 24px;
  height: 24px;
  font-size: 22px !important;
  display: inline-block;
  position: relative;
  top: 2px;
}
.font-size18 {
  font-size: 18px;
}
.font-size24 {
  font-size: 24px !important;
}
.logo img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}
.inputLeft {
  font-size: 24px;
  padding-right: 10px;
  color: #555;
}
</style>